const path = require("path")
const HtmlWebpackPligin = require('html-webpack-plugin')
//ProgressPlugin时webpack内置的插件
const {ProgressPlugin,ProvidePlugin} = require("webpack")

module.exports = {
    entry:{
        // app:path.resolve(__dirname,"../","src/main.js")

        //把第三方包从业务代码中抽离出来，方便后面对第三方包做CDN优化
        chunk:["react","react-dom/client"],
        app:{
            //import是用来指定我们业务代码（项目源码）的入口
            import:path.resolve(__dirname,"../","src/main.js"),
            //我们的业务代码是依赖第三方包的
            dependOn:"chunk"
        }
    },
    output:{
        path:path.resolve(__dirname,"../","dist"),
        filename:'js/[name].[chunkhash:8].js',
        clean:true,//每次build打包时，自动删除之前打包的文件
    },
    plugins:[
        new HtmlWebpackPligin({
            // template:'./public/index.html'
            template:path.resolve(__dirname,"../","public/index.html"),
            inject:"body",//把js脚本注入到body结束标签之前
            filename:"index.html",//指定打包成功后的页面的名字
            title:"vue-element-admin",//用来指定页面中title标题的
            favicon:path.resolve(__dirname,"../","public/favicon.ico")
        }),
        new ProgressPlugin({
            handler(percentage,message,...args){
                if(percentage == 1){
                    console.log("100%打包、启动成功");
                }else{
                    console.log(`${Math.floor(percentage*100)}%正在打包(编译)...`);
                }
            }
        }),
        new ProvidePlugin({
            React:path.resolve(__dirname,"../","node_modules/react/index.js")
        })
    ],

    //module是模块的意思，在webpack的眼中一切都是模块
    module:{
        rules:[
            {test:/\.(js|jsx|ts|tsx)$/,use:"babel-loader",exclude:/node_modules/},
            {test:/\.(css|scss)$/,use:["style-loader","css-loader","sass-loader"]},
            {
                test:/\.(png|jpg|svg|gif|jpeg|webp)$/,
                type:'asset/resource',
                generator:{
                    filename:'img/[name].[contenthash:8][ext]'
                }
            },
        ]
    },
    resolve:{
        alias:{
            "@":path.resolve(__dirname,"../","src")
        },
        extensions:['.js','.jsx','.ts','.tsx']
    }
}